    Ext.onReady(function(){  
        var fpl = new FuncPanel();//左侧panel  
        var mainPanel = new BodyPanel();//中间panel  
        var viewport = new Ext.Viewport({//用来展示页面的容器  
                                layout:'border',  
                                items:[fpl, mainPanel]//将FuncPanel和FuncBody放入其中显示  
                            });   
        viewport.doLayout();   
      }  
    );  


FuncPanel = function(){  
        FuncPanel.superclass.constructor.call(this,{  
            id: 'func-tree',  
    //      renderTo: 'funcs',//此处不应有，否则会使设置的布局无效  
            region: 'west',//在整个布局中的位置  
            useArrows: true,  
            lines: false,  
            width: 200,  
            margins:'0 5 5 0',//top,right,bottom,left填充  
            autoScroll: true,  
            split: true,  
            collapseMode: 'mini',//收展按钮的样式  
            rootVisible: false,  
            root: {  
                text: 'ROOT',  
                nodeType: 'async'  
            },  
            dataUrl: '../js/nodes.json'//树节点的数据源  
        }/*param config*/);  
    };  
      
    Ext.extend(FuncPanel,Ext.tree.TreePanel,{  
        initComponent: function(){  
            Ext.apply(this, {  
                tbar: ['->',{  
                    iconCls: 'icon-expand-all',//自定图标义样式  
                    text: 'Expand',  
                    handler: function(){ this.root.expand(true); },  
                    scope: this  
                }, '-', {  
                    iconCls: 'icon-collapse-all',//自定图标义样式  
                    text: 'Collapse',  
                    handler: function(){ this.root.collapse(true); },  
                    scope: this  
                }]  
            });  
            FuncPanel.superclass.initComponent.call(this);  
        }  
    });  
      
    BodyPanel = function(){  
        BodyPanel.superclass.constructor.call(this,{  
            id: 'func-body',  
            region: 'center',  
            margins:'0 5 5 0',   
    //      renderTo: 'func-body',  
            html: 'This is body area ... ...  ',
      
            autoScroll: true  
        }/*param config*/);   
    };  
      
    Ext.extend(BodyPanel,Ext.Panel,{  
        initComponent: function(){  
            Ext.apply(this,{  
                tbar: ['->',{  
                                text: 'Refresh',  
                                iconCls: 'icon-refresh'//自定图标义样式  
                            }  
                      ]  
            })  
        BodyPanel.superclass.initComponent.call(this);  
        }  
    });  
      
